<template>
  <el-dialog :title="`库存盘点详情`"
             :close-on-click-modal="false"
             :visible="isVisible"
             @open="handleOpen"
             @close="handleClose"
             width="80%"
             height="80%"
             style="overflow-y: auto;"
            >
    <div>
      <div class="maincss">
        <el-row>
          <el-card  >
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column label="耗材编号" align="center" prop="checkNo" :show-overflow-tooltip="true" />
              <el-table-column label="耗材名称" align="center" prop="name" :show-overflow-tooltip="true" />
              <el-table-column label="批号" align="center" prop="checkNo1" :show-overflow-tooltip="true" />
              <el-table-column label="浓度" align="center" prop="concentration" />
              <el-table-column label="库存数量" align="center" prop="num" />
              <el-table-column label="实际库存数量" align="center" prop="relNum" />
              <el-table-column label="盈亏" align="center" prop="loss" />
              <el-table-column label="盈亏原因" align="center" prop="lossRemark" />
              <el-table-column label="所属科室" align="center" prop="officeName" />
            </el-table>

<!--            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
            <div class="pagination-container">
              <el-pagination v-show="total>0"
                             background
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             layout="total, sizes,prev, pager, next,jumper"
                             :current-page.sync="pageNum"
                             :page-size="pageSize"
                             :page-sizes="[10,20,30,50]"
                             :total="total">
              </el-pagination>
            </div>
          </el-card>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>


import { queryMaterialInventoryDetailList } from '../../../api/business/material'

export default {
  name: "check-detail",
  data() {
    return {
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo:{},
      type: [],
      value: '',
      total: 5,
      pageNum: 1,
      pageSize: 20
    };
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    checkId: {
      type: String,
      default: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {

      this.getCheckList(this.id)
    }
    // this.getCheckList()
  },
  methods: {
   getCheckList(data){
     let form={
       id:data,
       pageNum: this.pageNum,
       pageSize: this.pageSize
     }
     this.loading = true;
     queryMaterialInventoryDetailList(form).then(response =>{
       this.loading = false;
       this.checkList=response.rows;
       this.total=response.total;
     })
   }

  },
    handleOpen() {},
    handleClose() {
      this.$emit('close', false)
    }

};
</script>
